<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			省份：<select name="" id="provinceId" onchange="changeProvince()">
				<option value="-1">请选择省份</option>
			</select>
			城市：<select name="" id="cityId" onchange="changeCity()">
				<option value="-1">请选择城市</option>
			</select>
			区县：<select name="" id="countiesId" onchange="changeCon()">
				<option value="-1">请选择区县</option>
			</select>
			<br>
			已选择：<label id="selectValue"></label>
		</div>
	</body>
	<script type="text/javascript">
		var provinces = ['福建','江西','广东','浙江'];
		provinces.push('江苏');
		var citys = [
			['泉州','厦门'],
			['九江','南昌'],
			['广州','深圳'],
			['杭州','温州'],
			['南京','苏州'],
		];
		var counties = [
			[['鲤城区','丰泽区'],['集美区','同安区']],
			[['1','2'],['3','4']],
			[['11','22'],['33','44']],
			[['5','6'],['7','8']],
			[['55','66'],['77','88']]
		];
		
		onload = function(){
			var proObj = document.getElementById('provinceId');
			for(var i = 0; i < provinces.length ; i++){
				proObj.innerHTML += `<option value="`+i+`">` + provinces[i] + `</option>`;
			}
		}
		
		function changeProvince(){
			var proObj = document.getElementById('provinceId');
			var cityObj = document.getElementById('cityId');
			cityObj.innerHTML = `<option value="-1">请选择城市</option>`;
			if(proObj.value == -1){
				return;
			}
			var city = citys[proObj.value];
			for(var i = 0; i < city.length;i++){
				cityObj.innerHTML += `<option value="`+ i +`">`+city[i]+`</option>`;
			}
		}
		
		function changeCity(){
			var cityObj = document.getElementById('cityId');
			var conObj = document.getElementById('countiesId')
			conObj.innerHTML = `<option value="-1">请选择区县</option>`;
			if(cityObj.value == -1){
				return;
			}
			var country = counties[cityObj.value];
			for(var i = 0; i < country.length;i++){
				conObj.innerHTML += `<option value="`+ i +`">`+country[cityObj.value][i]+`</option>`;
			}
		}
		function changeCon(){
			var provinceObj = document.getElementById('provinceId');
			var cityObj = document.getElementById('cityId');
			var conObj = document.getElementById('countiesId');
			var provinceName = provinces[provinceObj.value];
			var cityName = citys[provinceObj.value][cityObj.value];
			var conName = counties[provinceObj.value][cityObj.value][conObj.value];
			var selectObj = document.getElementById('selectValue');
			selectObj.innerText = provinceName+": "+cityName+":"+conName;
		}
	</script>
</html>
